<template>
  <div>
      <el-form :model="res.params" :rules="rules" ref="ruleForm" label-width="100px" style="width:460px" id="increaseForm" @submit.native.prevent = "formSubmitChange" >
        <el-form-item label="所属市场" required>
          <el-select v-model="res.params.marketId" placeholder="请选择所属市场"  >
            <el-option v-for="option in res.marketOptions" :key="option.marketId" :value="option.marketId" :label="option.marketName"></el-option>
          </el-select>
          <input type="hidden" v-model="res.params.marketId" name="marketId" >
        </el-form-item>
        <el-form-item label="发布状态" required>
          <el-select v-model="res.params.rotationState" placeholder="请选择发布状态">
            <el-option v-for="option in res.stateOption" :key="option.id" :value="option.id" :label="option.name"></el-option>
          </el-select>
          <input type="hidden" name="rotationState" v-model="res.params.rotationState" >
        </el-form-item>
        <el-form-item label="图片名称" required prop="rotationName" >
          <el-input clearable placeholder="请输入图片名称" name="rotationName" v-model="res.params.rotationName" ></el-input>
        </el-form-item>
        <el-form-item label="图片排序" required prop="rotationSeq">
          <el-input placeholder="请输入图片排序" type="number" setp="1" name="rotationSeq" v-model="res.params.rotationSeq" ></el-input>
        </el-form-item>
        <el-form-item label="图片链接">
          <el-input clearable placeholder="请输入图片链接" v-model="res.params.rotationUrl" name="rotationUrl" ></el-input>
        </el-form-item>
        <el-form-item label="显示时间" required prop="rotationShowSeconds" >
          <el-input type="number" setp="1" placeholder="请输入显示时间" name="rotationShowSeconds" v-model="res.params.rotationShowSeconds" >
            <span slot="suffix" style="padding-right:5px">秒</span>
          </el-input>
        </el-form-item>
        <el-form-item label="图片上传" class="is-required" prop="rotationFile" >
          <el-upload class="upload-demo" ref="updataImg" :file-list="updateList" list-type="picture-card" :limit="2" :on-change="updateChange" name="file" action="#" :auto-upload="false" >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="updateVisible">
            <img width="100%" :src="updateImage" >
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button form="increaseForm" type="primary" native-type="submit" >确 定</el-button>
          <el-button @click.native="$router.push('/banner/bannerList')">取消</el-button>
        </el-form-item>
      </el-form>

  </div>
</template>

<script>
  export default {
    data () {
      // 图片验证
      let rotationFileRules = (rule, value, callback) => {
        if (!(this.$route.params.id) && this.fileList.length !== 1) {
          callback(new Error('请选择图片'))
        } else {
          callback()
        }
      }
      return {
        updateVisible: false,
        updateImage: '',
        updateList: [],
        fileList: [],
        res: {
          marketOptions: [],
          stateOption: [
            {
              id: 0,
              name: '无效'
            },
            {
              id: 1,
              name: '有效'
            }
          ],
          params: {
            marketId: this.$marketId,
            rotationState: 1,
            rotationName: '',
            rotationSeq: '',
            rotationShowSeconds: '',
            file: ''
          }
        },
        rules: {
          rotationName: [{required: true, message: '请输入图片名称', trigger: 'blur'}],
          rotationSeq: [{required: true, message: '请输入图片排序', trigger: 'blur'}],
          rotationShowSeconds: [{required: true, message: '请输入显示时间', trigger: 'blur'}],
          rotationFile: [{validator: rotationFileRules, trigger: 'change'}]
        }
      }
    },
    watch: {
      '$route.params.id' () {
        this.init()
      }
    },
    methods: {
      // 图片变化
      updateChange (file, fileList) {
        this.fileList = fileList
        if (fileList.length > 1)  fileList.shift()
      },
      // 验证必填
      formSubmitChange (event) {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.formSubmit(event)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },

      init () {
        this.$set(this.res, 'params', {
          marketId: this.$marketId,
          rotationState: 1,
          rotationName: '',
          rotationSeq: '',
          rotationShowSeconds: '',
          file: ''
        })
        if (this.$route.params.id) {
          this.getData()
        }
      },
      getData () {
        this.$axios.get(this.$api.getRotationList, {params: {rotationId: this.$route.params.id}}).then(res => {
          this.res.params = res.data.result[0]
          this.updateList = []
          this.fileList = []
          this.updateList.push({name: 'names', url: window.imageUrl + this.res.params.rotationImage + '.w_146xh_146'})
        })
      },
      // 提交信息
      formSubmit (event) {
        let formData = new FormData(event.target)
        formData.append('userId', this.$sess.get('userInfo').userId)
        if (this.$route.params.id) formData.append('rotationId', this.$route.params.id)
        this.$axios.post(this.$api.insertOrUpdateRotation, formData).then(res => {
          if (res && ~~res.data.code === 1) {
            if (this.$route.params.id) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            } else {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
            }
            this.$router.back('/banner/bannerList')
          }
        })
      }
    },
    created () {
      // 获取marketList
      this.$store.commit('getMarketOptions', this.res)
    },
    activated () {
      this.init()
    },
    destroyed () {
    }
  }
</script>
